<template>
  <div>
    <!--下面内容 -->
    <div class="layout-editor-main">
      <!-- 下面中间内容 -->
      <div class="layout-editor-main__screen">
        <div style="display: flex; align-items: center; justify-content: center; width: 100%">
          <div style="width: 860px; height: 100%; flex: 0 0 860px; transform: scale(1); transform-origin: center top; will-change: transform">
            <div class="ui-task-detail ui-task-detail--wide">
              <div class="ui-task-detail__header">
                <div class="item-detail-panel-title flex-between">
                  <div class="item-title">
                    <p style="padding-left: 20px">任务</p>
                  </div>
                  <div>
                    <div class="flex item-btn">
                      <div v-for="(item, index) in btnList" :key="index">
                        <div style="padding: 0 2px">
                          <a-button type="primary" @click="superClickPop(item)">
                            <component :is="item.icon"></component>
                            {{ item.label }}
                          </a-button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <p class="item-detail-panel-desc">这是一条示例数据</p>
                <div class="item-key-field-list flex">
                  <div class="flex">
                    <div v-for="(item, index) in iconList" :key="index" class="flex">
                      <div v-if="item.isShow == true" class="flex" style="padding: 5px 20px; align-items: center">
                        <component :is="item.icon" style="font-size: 29px"></component>
                        <div style="margin-left: 10px">
                          <div>{{ item.label }}</div>
                          <div class="item-key-field-list-one">{{ item.type }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!-- tab部分 -->
              <div class="ui-task-detail__container">
                <div class="ui-task-detail__main">
                  <a-tabs v-model:activeKey="activeKey">
                    <a-tab-pane v-for="item in list" :key="item.id" :tab="item.label">
                      <component :is="item.url" />
                    </a-tab-pane>
                  </a-tabs>
                </div>
                <!-- 右侧活动及流转 -->
                <div class="ui-task-detail__side">
                  <a-tabs v-model:activeKey="activeKeyRight">
                    <a-tab-pane v-for="item in listRight" :key="item.id" :tab="item.label">
                      <component :is="item.url" />
                    </a-tab-pane>
                  </a-tabs>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <addPop ref="attrListPop" />
    <addPop1 ref="attrListPop1" />
    <addPop2 ref="attrListPop2" />
    <addPop3 ref="attrListPop3" />
    <addPop4 ref="attrListPop4" />
  </div>
</template>

<script setup lang="ts">
import XTModuleBIColumnar from "@/components/Business/XTModuleBI/XTModuleBIColumnar.vue"
import detail from "@/components/Business/XTModuleViewEditor/XTModuleTabsHome/detail.vue"
import activity from "@/components/Business/XTModuleViewEditor/XTModuleTabs/activity.vue"
import file from "@/components/Business/XTModuleViewEditor/XTModuleTabs/file.vue"
import beforeTask from "@/components/Business/XTModuleViewEditor/XTModuleTabs/beforeTask.vue"
import addPop from "@/components/Business/XTModuleViewEditor/XTModuleTabsHome/addOperationPop.vue"
import addPop1 from "@/components/Business/XTModuleViewEditor/XTModuleTabsHome/addOperationPop1.vue"
import addPop2 from "@/components/Business/XTModuleViewEditor/XTModuleTabsHome/addOperationPop2.vue"
import addPop3 from "@/components/Business/XTModuleViewEditor/XTModuleTabsHome/addOperationPop3.vue"
import addPop4 from "@/components/Business/XTModuleViewEditor/XTModuleTabsHome/addOperationPop4.vue"
const activeKey = ref(1)
const activeKeyRight = ref("1")
// tabs展示的list
const list = reactive([
  {
    label: "详情",
    value: "详情",
    url: detail,
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 1,
  },
  {
    label: "前置依赖",
    value: "前置依赖",
    url: beforeTask,
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 2,
  },
  {
    label: "后置影响",
    value: "后置影响",
    id: 3,
    isShow: true,
    isCheck: false,
    isDisabled: false,
    url: beforeTask,
  },
  {
    label: "文件",
    value: "文件",
    id: 4,
    url: file,
    isShow: true,
    isCheck: false,
    isDisabled: false,
  },
  {
    label: "子工作项",
    value: "子工作项",
    id: 5,
    isShow: true,
    isCheck: false,
    isDisabled: false,
    url: XTModuleBIColumnar,
  },
])
const listRight = reactive([
  {
    label: "活动",
    id: "1",
    url: activity,
  },
  {
    label: "流转",
    id: "2",
    url: activity,
  },
  {
    label: "任务审批",
    id: "3",
    url: activity,
  },
])
// icon动态加载  首先需要申明定义
const icon = ref("UserOutlined")
const icon1 = ref("right-circle-two-tone")
const icon2 = ref("calendar-two-tone")

// icon展示列表数据
const iconList = reactive([
  {
    label: "XXX",
    value: "XXX",
    icon: icon2,
    type: "负责人",
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 1,
  },
  {
    label: "未选择",
    value: "未选择",
    icon: icon2,
    type: "当前状态",
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 2,
  },
  {
    label: "未设置",
    value: "未设置",
    icon: icon2,
    type: "当前进度",
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 3,
  },
  {
    label: "未设置",
    value: "未设置",
    icon: icon2,
    type: "发布日期",
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 4,
  },
])
// btn展示列表数据
const btnList = reactive([
  {
    label: "超算",
    value: "超算",
    icon: icon,
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 1,
  },
  {
    label: "设计工具",
    value: "设计工具",
    icon: icon,
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 2,
  },
  {
    label: "IP/PDK",
    value: "IP/PDK",
    icon: icon,
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 3,
  },
  {
    label: "项目文件柜",
    value: "项目文件柜",
    icon: icon,
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 4,
  },
  {
    label: "交付物",
    value: "交付物",
    icon: icon,
    url: "",
    isShow: true,
    isCheck: false,
    isDisabled: false,
    id: 5,
  },
])

// 打开右侧添加快捷方式弹窗--attr
const attrListPop = ref()
const attrListPop1 = ref()
const attrListPop2 = ref()
const attrListPop3 = ref()
const attrListPop4 = ref()
const superClickPop = (item: any) => {
  if (item.label == "超算") attrListPop.value.showModal()
  else if (item.label == "设计工具") attrListPop1.value.showModal()
  else if (item.label == "IP/PDK") attrListPop2.value.showModal()
  else if (item.label == "项目文件柜") attrListPop3.value.showModal()
  else if (item.label == "交付物") attrListPop4.value.showModal()
}
</script>
<style lang="less" scoped>
.layout-editor-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-flow: row nowrap;
  .layout-editor-main__side {
    width: 260px;
    padding: 20px 0;
    box-shadow: 0 3px 12px 0 rgb(48 48 48 / 5%), 0 4px 8px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(48 48 48 / 10%);
    background-color: #fff;
    z-index: 1;
    .layout-config {
      margin-bottom: 20px;
      padding-left: 20px;
      padding-right: 20px;
      .layout-config__title {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
        color: #303030;
      }
      .layout-config__title,
      .layout-config__section {
        margin-bottom: 10px;
      }
    }
  }
  .layout-editor-main__screen {
    flex: 1;
    padding: 10px 30px;
    overflow: auto;
    background: #dedede;
    .ui-task-detail--wide {
      height: 100%;
      display: flex;
      flex-flow: column;
      padding-bottom: 0px;
      border-left: 0;
      flex: 1 1 auto;
      position: relative;
      width: 100%;
      max-width: 100%;
      .ui-task-detail__header {
        // margin-bottom: 10px;
        border-radius: 3px;
        box-shadow: 0 0 2px 0 rgb(31 31 31 / 5%), 0 1px 2px 0 rgb(31 31 31 / 15%);
        background: #fff;
        .item-detail-panel-title {
          font-size: 16px;
          border-bottom: 1px solid #e8e8e8;
          .item-btn {
            cursor: pointer;
            padding: 10px;
            p {
              margin: 0 10px;
            }
          }
        }
        .item-detail-panel-desc {
          font-size: 20px;
          padding: 5px 20px;
        }
        .item-key-field-list {
          .flex-rowl {
            margin: 10px 20px;
            .item-key-field-list-one {
              color: #9a9a9a;
              font-size: 12px;
            }
            div {
              margin-left: 5px;
            }
          }
        }
      }
      .ui-task-detail__container {
        margin-top: 10px;
        // background: #fff;
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        flex: 1;
        min-height: 0;
        .ui-task-detail__main {
          flex: 1 1 68%;
          min-width: 400px;
          margin-right: 10px;
          // padding: 0 20px;
          background: #fff;
          .tabs {
            cursor: pointer;
            padding: 5px 0;
          }
        }
        .ui-task-detail__side {
          min-width: 240px;
          max-width: 460px;
          flex: 0 0 32%;
          padding: 0 20px;
          background: #fff;
        }
      }
    }
  }
  .layout-editor-main__side {
    width: 260px;
    padding: 20px px 0;
    box-shadow: 0 3px 12px 0 rgb(48 48 48 / 5%), 0 4px 8px 0 rgb(48 48 48 / 10%), 0 0 1px 0 rgb(48 48 48 / 10%);
    background-color: #fff;
    z-index: 1;
    div {
      .inspector__title {
        position: relative;
        font-size: 18px;
        font-weight: 500;
        line-height: 1.5;
        color: #303030;
        margin-bottom: 20px;
        padding-left: 20px;
        padding-right: 20px;
        .inspector__dismiss {
          position: absolute;
          top: -1px;
          right: 20px;
        }
        .inspector__subtitle {
          font-size: 14px;
          line-height: 1.43;
          margin-top: 5px;
          color: #909090;
          font-weight: normal;
        }
      }
      .inspector-panel {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-flow: column;
        .inspector-panel__hd {
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
          padding-left: 20px;
          padding-right: 20px;
          .inspector-panel__title {
            font-size: 15px;
            font-weight: 500;
            line-height: 1.47;
            color: #303030;
            flex: 1;
            white-space: nowrap;
          }
          .inspector-panel__tool {
            position: relative;
            right: -10px;
          }
        }
      }
      .inspector-panel__bd {
        padding: 5px 20px;
        font-size: 12px;
        color: #909090;
        .layout-editor-sortable-group__hd {
          color: #000;
          cursor: all-scroll;
          font-size: 17px;
          margin-top: 10px;
        }
      }
      .inspector__section {
        padding-left: 20px;
        padding-right: 20px;
        margin-bottom: 20px;
        .ones-button-block {
          width: 100%;
        }
      }
    }
    .layout-guide {
      padding-left: 20px;
      padding-right: 20px;
      .layout-guide__title {
        margin-bottom: 20px;
        font-size: 18px;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: normal;
        color: #303030;
      }
      .layout-guide-list {
        padding: 0;
        margin: 0;
        list-style: none;
        .layout-guide-list-item {
          padding-left: 15px;
          .layout-guide-list-item__title {
            font-size: 15px;
            font-weight: 500;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.47;
            letter-spacing: normal;
            color: #303030;
            margin-left: -15px;
          }
          .layout-guide-list-item__desc {
            font-size: 14px;
            font-weight: normal;
            font-stretch: normal;
            font-style: normal;
            line-height: 1.43;
            letter-spacing: normal;
            color: #606060;
          }
          .layout-guide-list-item__pic {
            margin: 10px 0 20px;
            box-shadow: 0 0 1px 0 silver, 0 4px 8px 0 silver, 0 3px 12px 0 silver;
          }
        }
      }
    }
  }
}
</style>
<style scoped>
.ui-task-detail__main:deep(.ant-tabs-nav-wrap) {
  padding: 0 20px;
  cursor: pointer;
}
</style>
